<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      margin: 0 auto;
      width: 1200px;
      height: 200px;
      border: 1px solid black;
    }

    .word {
      position: relative;
      width: 100px;
      height: 50px;
      border: 1px solid red;
      text-align: center;
      font-size: 36px;
      top: 0;
      left: 0;
      /* animation: identifier 3.5s ease-out 1; */
    }


    /* @keyframes identifier {
      0% {
        opacity: 1;
        top: 100px
      }

      25% {
        opacity: 0.9;
        top: 150px
      }

      50% {
        opacity: 0.7;
        top: 200px
      }

      75% {
        opacity: 0.5;
        top: 250px
      }

      100% {
        opacity: 0;
        top: 300px;
      }
    }  */
  </style>
</head>

<body>

  <div class="box">
    <!-- <div class="word"></div> -->

  </div>
  <a href="index2.html">正常一点</a>

</body>
<script>
  let body = document.querySelector("body");
  let space = 50;
  let inp = null;
  let down = null;
  let speed = 200;
  let isRun = false;
  //随机生成一个字母
  let random_word = String.fromCharCode((Math.ceil(Math.random() * 25 + 97)));
  //生成的字母放到盒子里
  // word.innerText = random_word;
  //随机生成6个字母放到box里
  let box = document.querySelector(".box")
  let random_words = "";
  let arrdiv = [];
  let arr = [];
  let random = [];

  for (let i = 1; i <= 6; i++) {
    arr[i] = String.fromCharCode((Math.ceil(Math.random() * 25 + 97)));
    arrdiv[i] = document.createElement("div");
    arrdiv[i].setAttribute("class", "word");
    arrdiv[i].innerText = arr[i]
    box.appendChild(arrdiv[i]);
  }
  let word = document.querySelectorAll(".word");
  [...word].map((item) => {
    random.push(item.innerText);
  })
  // console.log(random[0]);




  body.addEventListener("keydown", () => {
    inp = String.fromCharCode(event.keyCode).toLowerCase();
    if (random.includes(inp)) {
      run();
    } else {
      console.log(123);
    }
  })



  function run() {
    if (space >= 100) {
      speed -= 50;
    }
    let timer = setTimeout(run, speed);
    [...word].map((item) => {
      item.style.top = space + "px";
    });
    console.log(space);

    if (space == 650) {
      [...word].map((item) => {
        item.style.display = "none"
      });
      clearTimeout(timer)
    }
    space += 30;
  }












</script>

</html>